<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0"><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />   
        <title>Welcome to Design Zone......</title>
        <link rel="stylesheet" type="text/css" href="../../scripts/ext/resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css"
			href="../../scripts/ext/resources/css/file-upload.css" />
        <link rel="stylesheet" type="text/css" href="../../styles/dzbase.css" />
        <script type="text/javascript" src="../../scripts/ext/adapter/ext-base.js">
        </script>
        <script type="text/javascript" src="../../scripts/ext/ext-all.js">
        </script>
        <script type="text/javascript"
			src="../../scripts/form/FileUploadField.js"></script>
        <script type="text/javascript" src="../../scripts/grid/GroupSummary.js">
        </script>
		<script type="text/javascript" src="../../scripts/grid/RowExpander.js">
        </script>
        <script type="text/javascript" src="../../scripts/menu/EditableItem.js">
        </script>
        <script type="text/javascript" src="../../scripts/menu/RangeMenu.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/GridFilters.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/filter/Filter.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/filter/StringFilter.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/filter/ListFilter.js">
        </script>
        <script type="text/javascript" src="../../scripts/form/FileUploadField.js">
        </script>
        <script type="text/javascript" src="../../scripts/i18nMessage.js">
        </script>
        <script type="text/javascript" src="../../scripts/utils.js">
        </script>
        <script type="text/javascript" src="../../scripts/selectBiFactory.js"></script>
        <script type="text/javascript" src="../../scripts/imageViewer.js"></script>
        <script type="text/javascript">
        	var orderMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.order');
        	var dzColorMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.dzcolor');
            var pantoneMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.pantonecolor');
			var yarnMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.yarn');
			var customerMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.francecustomer');
			var fMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.factory');
			var fcMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.francecustomer');
            var message = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=message');
			var colorMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.pantonecolor');
			
			var ctYesnoXmlLoader = new xmlLoader('../../servlet/CodeTableServlet?name=CtYesno');
			
			var orderYarnId = getPrarmeterValue(window.location, 'id');
            var startPage = getPrarmeterValue(window.location, 'startPage');
			
			var isColorConfirmedStore;
			var isQuanlityTestedStore;
			
			var isColorConfirmedCombo;
			var isQuanlityTestedCombo;
			
			var lotForm;
			var lotStore;
            var lotGrid;
			
			isColorConfirmedStore = new Ext.data.Store({
                    reader: new Ext.data.XmlReader({
                        record: 'item',
                        id: 'code',
                        totalRecords: 'itemTotal'
                    }, ['code', 'description']),
                    data: ctYesnoXmlLoader.getXml()
                });
                
            isQuanlityTestedStore = new Ext.data.Store({
                 reader: new Ext.data.XmlReader({
                     record: 'item',
                     id: 'code',
                     totalRecords: 'itemTotal'
                 }, ['code', 'description']),
                 data: ctYesnoXmlLoader.getXml()
             });
               
            isColorConfirmedCombo = new Ext.form.ComboBox({
                   fieldLabel: orderMessage.get('ui.order.colorconfirmed'),
                   id: 'isColorConfirmed',
                   name: 'isColorConfirmed',
                   allowBlank: false,
                   blankText: message.get('message.edit.noblank'),
                   editable: false,
                   store: isColorConfirmedStore,
                   valueField: 'code',
                   displayField: 'description',
                   triggerAction: 'all',
                   emptyText: message.get('message.combo.pleaseselect'),
                   selectOnFocus: true,
                   anchor: '80%',
                   mode: 'local'
               });
            
            isQuanlityTestedCombo = new Ext.form.ComboBox({
                   fieldLabel: orderMessage.get('ui.order.testquality'),
                   id: 'isQuanlityTested',
                   name: 'isQuanlityTested',
                   allowBlank: false,
                   blankText: message.get('message.edit.noblank'),
                   editable: false,
                   store: isQuanlityTestedStore,
                   valueField: 'code',
                   displayField: 'description',
                   triggerAction: 'all',
                   emptyText: message.get('message.combo.pleaseselect'),
                   selectOnFocus: true,
                   anchor: '80%',
                   mode: 'local'
               });
			
			var deleteCallback = function(btn){
                if (btn == 'yes') {
                    Ext.Ajax.request({
                        url: '../../servlet/OrderYarnServlet?action=102&id=' + deleteId,
                        success: function(o){
                            if (o.responseText == 'success') {
                                lotStore.reload();
                                messageTip.msg(message.get('message.tip'), message.get('message.delete.successful'));
                            }
                            else {
                                messageTip.msg(message.get('message.tip'), message.get('message.delete.unsuccessful'));
                            }
                        },
                        failure: function(o){
                            messageTip.msg(message.get('message.tip'), message.get('message.delete.failure'));
                        },
                        params: {
                            foo: 'bar'
                        }
                    });
                }
            }
			
			var editCallback = function(){
				lotForm.getForm().load({
					url:'../../servlet/OrderYarnServlet?action=103&id=' + editId + '&' + (new Date()).getTime(), 
					waitMsg:Ext.LoadMask.prototype.msg, 
					success: function(form, action){
						Ext.getCmp('orderYarnId').setValue(orderYarnId);
					},
					failure: function(o){
						messageTip.msg(message.get('message.tip'), message.get('message.load.unsuccessful'));
					}
				});
			}
			
			var orderYarnXMLReader = new Ext.data.XmlReader({
	                record: 'item'
	            }, [{
                        name: 'id',
                        mapping: 'id'
                    }, {
                        name: 'dzColorId',
                        mapping: 'dzColorId'
                    }, {
                        name: 'reference',
                        mapping: 'reference'
                    }, {
                        name: 'referenceIndex',
                        mapping: 'referenceIndex'
                    }, {
                        name: 'ctDesignType',
                        mapping: 'ctDesignType'
                    }, {
                        name: 'ctSeasonNumber',
                        mapping: 'ctSeasonNumber'
                    }, {
                        name: 'isConfirmed',
                        mapping: 'isConfirmed'
                    }, {
                        name: 'dzColorId',
                        mapping: 'dzColorId'
                    }, {
                        name: 'dzColorCode',
                        mapping: 'dzColorCode'
                    }, {
                        name: 'dzColorCode',
                        mapping: 'dzColorCode'
                    }, {
                        name: 'launchDate',
                        mapping: 'launchDate'
                    }, {
                        name: 'confirmedDate',
                        mapping: 'confirmedDate'
                    }, {
                        name: 'customerName',
                        mapping: 'customerName'
                    }, {
                        name: 'customerDepartment',
                        mapping: 'customerDepartment'
                    }, {
                        name: 'customerColorCode',
                        mapping: 'customerColorCode'
                    }, {
                        name: 'yarnReference',
                        mapping: 'yarnReference'
                    }, {
                        name: 'ctYarnMeasure',
                        mapping: 'ctYarnMeasure'
                    }, {
                        name: 'yarnAccount',
                        mapping: 'yarnAccount'
                    }, {
                        name: 'factoryName',
                        mapping: 'factoryName'
                    }, {
                        name: 'addressFactoryCN',
                        mapping: 'addressFactoryCN'
                    }, {
                        name: 'addressFactoryEN',
                        mapping: 'addressFactoryEN'
                    }, {
                        name: 'supplierNumber',
                        mapping: 'supplierNumber'
                    }, {
                        name: 'pantoneNumber',
                        mapping: 'pantoneNumber'
                    }, {
                        name: 'realColor',
                        mapping: 'realColor'
                    }, {
                        name: 'ctYarnMaterial1',
                        mapping: 'ctYarnMaterial1'
                    }, {
                        name: 'ctYarnMaterial2',
                        mapping: 'ctYarnMaterial2'
                    }, {
                        name: 'ctYarnMaterial3',
                        mapping: 'ctYarnMaterial3'
                    }, {
                        name: 'ctYarnMaterial4',
                        mapping: 'ctYarnMaterial4'
                    }, {
                        name: 'ctYarnMaterial5',
                        mapping: 'ctYarnMaterial5'
                    },{
                        id: 'photo1Name',
                        name: 'photo1Name'
                    },{
                        id: 'photo2Name',
                        name: 'photo2Name'
                    },{
                        id: 'photo3Name',
                        name: 'photo3Name'
                    }, {
                        name: 'remark',
                        mapping: 'remark'
                    }]);
			
			var orderYarnXmlLoader = new xmlLoader('../../servlet/OrderYarnServlet?action=11&id=' + orderYarnId);
			var orderYarnRecord = orderYarnXMLReader.readRecords(orderYarnXmlLoader.getXml()).records[0];
			var itemTplMarkup = [
						'<table cellspacing="0" id="the-table" style="width: 100%;"><tbody>',
							'<tr><td style="background:#eeeeee; width: 15%;">',
							message.get('message.list.id'),
							'</td><td>{id}</td>',
							'<td style="background:#eeeeee;width: 15%;">',
							orderMessage.get('ui.order.reference'),
							'</td><td>{reference}</td>',
							'<td style="background:#eeeeee;">',
							message.get('message.edit.seasonnumber'),
							'</td><td>{ctSeasonNumber}</td>',
							'<td style="background:#eeeeee;">',
							orderMessage.get('ui.order.dzcolor'),
							'</td><td>{dzColorCode}</td></tr>',
							
							'<tr><td style="background:#eeeeee; width: 15%;">',
							orderMessage.get('ui.order.launchdate') + "(d/m/Y)",
							'</td><td>{launchDate}</td>',
							'<td style="background:#eeeeee;width: 15%;">',
							fcMessage.get('ui.francecustomer.name'),
							'</td><td>{customerName}</td>',
							'<td style="background:#eeeeee;">',
							fcMessage.get('ui.francecustomer.department'),
							'</td><td>{customerDepartment}</td>',
							'<td style="background:#eeeeee;">',
							dzColorMessage.get('ui.dzcolor.customercolorcode'),
							'</td><td>{customerColorCode}</td></tr>',

							'<tr><td style="background:#eeeeee; width: 15%;">',
							fMessage.get('ui.factory.name'),
							'</td><td>{factoryName}</td>',
							'<td style="background:#eeeeee;width: 15%;">',
							dzColorMessage.get('ui.dzcolor.factorycolorcode'),
							'</td><td>{supplierNumber}</td>',
							'<td style="background:#eeeeee;">',
							pantoneMessage.get('ui.pantonecolor.number'),
							'</td><td>{pantoneNumber}</td>',
							'<td style="background:#eeeeee;">',
							colorMessage.get('ui.pantonecolor.realcolor'),
							'</td><td style="background-color: #{realColor};"></td></tr>',
							
							'<tr><td style="background:#eeeeee; width: 15%;">',
							yarnMessage.get('ui.yarn.reference'),
							'</td><td>{yarnReference}</td>',
							'<td style="background:#eeeeee;width: 15%;">',
							yarnMessage.get('ui.yarn.yarnaccount'),
							'</td><td>{ctYarnMeasure}&nbsp;{yarnAccount}</td>',
							'<td style="background:#eeeeee;">',
							yarnMessage.get('ui.yarn.composition'),
							'</td><td colspan="3">{ctYarnMaterial1}&nbsp;&nbsp; {ctYarnMaterial2}&nbsp;&nbsp; {ctYarnMaterial3}&nbsp;&nbsp; {ctYarnMaterial4}&nbsp;&nbsp; {ctYarnMaterial5}</td></tr>',
														
							'<tr><td style="background:#eeeeee;">',
							orderMessage.get('ui.measurespecification.photo'),
							'</td><td colspan="7"><img height="200" src="../../_temp/{photo3Name}" onclick="openImageViewer(this.src);"></td></tr>',
						'</tbody></table>'
			];
			
            var itemTpl = new Ext.Template(itemTplMarkup);

            var selectedFactory;
            var selectFactoryCallback = function(factoryId, deliveryAddress){
                Ext.getCmp('deliveryAddress').setValue(selectedFactory.addressFactoryCN + '\r\n' + selectedFactory.addressFactoryEN);
			}
			
			Ext.onReady(function(){
				itemTpl.append('orderYarn', orderYarnRecord.data);
				
				Ext.QuickTips.init();
                Ext.form.Field.prototype.msgTarget = 'side';
                
                var lotXMLReader = new Ext.data.XmlReader({
		                record: 'item'
		            }, [{
		                name: 'id',
		                mapping: 'id'
		            },{
						name: 'orderYarnId',
						mapping: 'orderYarnId'
					}, {
		                name: 'lotNumber',
		                mapping: 'lotNumber'
		            }, {
		                name: 'isColorConfirmed',
		                mapping: 'isColorConfirmed'
		            }, {
		                name: 'deliveryAddress',
		                mapping: 'deliveryAddress'
		            }, {
		                name: 'deliveryDate',
		                mapping: 'deliveryDate'
		            }, {
		                name: 'quantity',
		                mapping: 'quantity'
		            }, {
		                name: 'isQuanlityTested',
		                mapping: 'isQuanlityTested'
		            }, {
		                name: 'comment',
		                mapping: 'comment'
		            }, {
		                name: 'photoName',
		                mapping: 'photoName'
		            }]);
		            
		        lotForm = new Ext.FormPanel({
		        	fileUpload: true,
			        labelAlign: 'left',
					url: '../../servlet/OrderYarnServlet?action=101',
			        frame:true,
			        title: orderMessage.get('ui.order.editlot'),
			        bodyStyle:'padding:5px 5px 5px 5px;margin-top: 2px;',
			        width: '100%',
					labelWidth: 75,
					reader: lotXMLReader,
					collapsible: true,
			        items: [{
	                        id: 'orderYarnId',
	                        name: 'orderYarnId',
	                        xtype: 'hidden',
							value: orderYarnId
                    	},{
	                        id: 'id',
	                        name: 'id',
	                        xtype: 'hidden'
                    	},{
							layout: 'column',
							items: [{
								columnWidth:.20,
				                layout: 'form',
								items: [{
									xtype:'numberfield',
				                    fieldLabel: orderMessage.get('ui.order.lotnumber'),
				                    name: 'lotNumber',
				                    anchor:'90%',
									allowBlank: false,
                        			blankText: message.get('message.edit.noblank'),
									maxLength: 64,
									tabIndex: 1
								}]
							},{
								columnWidth:.20,
				                layout: 'form',
								items: [isColorConfirmedCombo]
							},{
								columnWidth:.20,
				                layout: 'form',
								items: [isQuanlityTestedCombo]
							},{
								columnWidth:.20,
				                layout: 'form',
								items: [{
									fieldLabel: orderMessage.get('ui.order.deliverydate') + "(d/m/Y)",
			                        id: 'deliveryDate',
			                        name: 'deliveryDate',
									anchor: '90%',
			                        xtype: 'datefield',
			                        allowBlank: false,
									tabIndex: 2
								}]
							},{
								columnWidth:.20,
				                layout: 'form',
								items: [{
									xtype:'numberfield',
				                    fieldLabel: orderMessage.get('ui.order.quantity') + '(Kg)',
				                    name: 'quantity',
				                    anchor:'90%',
									allowBlank: false,
                        			blankText: message.get('message.edit.noblank'),
									maxLength: 64,
									tabIndex: 1
								}]
							}]
                    	},{
							layout: 'column',
							items: [{
								columnWidth:.33,
				                layout: 'form',
								items: [{
									xtype: 'fileuploadfield',
									width: '80%',
						            id: 'photo',
									name: 'photo',
						            emptyText: message.get('message.edit.selectimage'),
						            fieldLabel: message.get('message.edit.photo'),
						            buttonCfg: {
						                text: '',
						                iconCls: 'uploadIcon'
					            	}
								}]
							},{
								columnWidth:.33,
				                layout: 'form',
								items: [{
			                        fieldLabel: orderMessage.get('ui.order.deliveryaddress'),
			                        id:'deliveryAddress',
			                        name: 'deliveryAddress',
			                        //value: orderYarnRecord.data.addressFactoryCN + '\r\n' + orderYarnRecord.data.addressFactoryEN,
			                        xtype: 'textarea',
			                        maxLength: 512,
									width: '90%',
									allowBlank: false,
			                        maxLengthText: message.get('message.edit.toolong'),
			                        listeners: {
                                        'render': {
                                            fn: function(){
                                                Ext.getCmp('deliveryAddress').getEl().on('click', function(){
                                                    selectFactory(selectFactoryCallback, '02');
                                                }, this);
                                            },
                                            scope: this
                                        }
                                    }
			                    }]
							},{
								columnWidth:.33,
				                layout: 'form',
								items: [{
			                        fieldLabel: message.get('message.edit.comment'),
			                        name: 'comment',
			                        xtype: 'textarea',
			                        maxLength: 512,
									width: '90%',
			                        maxLengthText: message.get('message.edit.toolong')
			                    }]
							}]
                    	}],
			
			        buttons: [{
			            text: message.get('message.edit.save'),
						handler: function(){
                            if (lotForm.getForm().isValid()) {
								document.getElementsByName('isColorConfirmed')[0].value = isColorConfirmedCombo.getValue();
								document.getElementsByName('isQuanlityTested')[0].value = isQuanlityTestedCombo.getValue();
								
                                lotForm.getForm().submit({
                                    method: 'post',
                                    success: function(form, action){
                                        messageTip.msg(message.get('message.tip'), message.get('message.edit.successful'));
                                        lotForm.getForm().reset();
										lotStore.load();
                                    },
                                    failure: function(form, action){
                                        messageTip.msg(message.get('message.tip'), message.get('message.edit.unsuccessful'));
                                    }
                                });
                            }
                        }
			        },{
						text: message.get('message.edit.reset'),
						handler: function(){
							lotForm.getForm().reset();
						}
					},{
			            text: message.get('message.edit.cancel'),
                        handler: function(){
                            if (startPage != null) {
                                window.location = 'order_yarn_list.html?startPage=' + startPage;
                            }else {
                                window.location = 'order_yarn_list.html';
                            }
                        }
			        }]
			    });
				
				lotForm.render('lot');
				
				lotStore = new Ext.data.GroupingStore({
                    url: '../../servlet/OrderYarnServlet?action=100&id=' + orderYarnId,
                    
                    reader: new Ext.data.XmlReader({
                        record: 'item',
                        id: 'id',
                        totalRecords: 'itemTotal'
                    }, ['index', 'id', 'lotNumber', 'isColorConfirmed', 'deliveryAddress',
                    	'deliveryDate', 'isQuanlityTested', 'comment', 'photoName', 
						{
							name: 'quantity',
							type: 'float'
						}]),
                    
                   	groupField: 'index',
                    sortInfo: {
                        field: 'lotNumber',
                        direction: "ASC"
                    }
                });
                
                var expander = new Ext.grid.RowExpander({
			        tpl : new Ext.XTemplate(
			        	'<p><b>' + orderMessage.get('ui.order.deliveryaddress') + ':</b> {deliveryAddress}</p>',
			        	'<br/><p><img src="../../_temp/{photoName}" width="150px"/> </p>',
						'<br/><br/><p><b>' + message.get('message.edit.comment') + ':</b> {remark}</p><br/>'
			        )
			    });
			    
                var summary = new Ext.grid.GroupSummary();
                lotGrid = new Ext.grid.GridPanel({
                    title: orderMessage.get('ui.order.lotlist'),
                    store: lotStore,
                    stripeRows: true,
                    height: 360,
                    columns: [{
                        header: message.get('message.list.id'),
                        width: 50,
                        dataIndex: 'index',
                        sortable: false
                    }, expander, {
                        id: 'lotNumber',
                        header: orderMessage.get('ui.order.lotnumber'),
                        dataIndex: 'lotNumber',
						groupable: false
                    },{
                        id: 'isColorConfirmed',
                        header: orderMessage.get('ui.order.colorconfirmed'),
                        dataIndex: 'isColorConfirmed',
						groupable: false
                    },{
                        id: 'isQuanlityTested',
                        header: orderMessage.get('ui.order.testquality'),
                        dataIndex: 'isQuanlityTested',
						groupable: false
                    },{
                        id: 'deliveryDate',
                        header: orderMessage.get('ui.order.deliverydate'),
                        dataIndex: 'deliveryDate',
						groupable: false,
						summaryRenderer: function(v, params, data){
		                    return '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + message.get('message.list.total');
		                }
                    },{
                        header: orderMessage.get('ui.order.quantity') + '(Kg)',
						id: 'quantity',
                        dataIndex: 'quantity',
						align: 'right',
						groupable: false,
                        sortable: false,
						summaryType:'sum',
						renderer: renderStock
                    },{
                        header: message.get('message.list.eidt'),
                        width: 30,
                        dataIndex: 'id',
                        sortable: false,
						groupable: false,
                        renderer: renderEdit
                    },{
                        header: message.get('message.list.delete'),
                        width: 30,
                        dataIndex: 'id',
                        sortable: false,
						groupable: false,
                        renderer: renderDelete
                    }],
                    view: new Ext.grid.GroupingView({
                        forceFit: true,
						hideGroupedColumn: true,
						enableNoGroups:false,
                        groupTextTpl: '{[values.rs.length]}&nbsp;&nbsp;Lots'
                    }),
                    loadMask: true,
                    plugins: [summary,expander],
                    renderTo: 'lotList'
                });
                
                lotStore.load();
                
                function renderEdit(value, p, record){
                    return String.format('<a href="javascript: editItem(editCallback, {0});"><img src="../../images/icons/pencil.png" title="Edition" /></a>', record.id);
                }
                
                function renderDelete(value, p, record){
                    return String.format('<a href="javascript: deleteItem(deleteCallback, {0});"><img src="../../images/icons/delete.png" title="Supprimer"/></a>', record.id);
                }
                
                
			});
        
        </script>
    </head>
    <body>
       <div id="orderYarn">
				
		</div>
		<div id="lot">
				
		</div>
		<div id="lotList">
			
		</div>
    </body>
</html>
